<template>
  <div class="login-contain">
    <video
      src="../../assets/video/111.mp4"
      preload="auto"
      autoplay
      loop
      muted
    ></video>

    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="login-ruleForm"
    >
      <h1 class="el-title">LEAGUE OF LEGENDS</h1>
      <el-form-item label="账号" prop="userName">
        <el-input
          type="username"
          v-model="ruleForm.userName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="captcha">
        <el-input
          type="text"
          class="captcha"
          autocomplete="off"
          v-model="ruleForm.captcha"
          @keydown.native.enter="submitForm('ruleForm')"
        ></el-input>
        <span class="captcha-svg" v-html="captcha" @click="getCaptcha"></span>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >登录</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { loginApi, getCaptchaApi, verifyCaptchaApi } from "@/api";

var validateUsn = (rule, value, callback) => {
  var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  if (uPattern.test(value)) {
    callback();
  } else {
    callback("3到16位(字母，数字，下划线，减号)");
  }
};
var validatePas = (rule, value, callback) => {
  if (!value) {
    callback("密码输入不能为空");
  } else {
    callback();
  }
};
var validateCap = (rule, value, callback) => {
  if (!value) {
    callback("验证码输入不能为空");
  } else {
    callback();
  }
};
export default {
  data() {
    return {
      captcha: "",
      ruleForm: {
        userName: "",
        password: "",
        captcha: "",
      },
      rules: {
        userName: [{ validator: validateUsn, trigger: "blur" }],
        password: [{ validator: validatePas, trigger: "blur" }],
        captcha: [{ validator: validateCap, trigger: "blur" }],
      },
    };
  },
  methods: {
    getCaptcha() {
      getCaptchaApi().then((res) => {
        this.captcha = res.data.img;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          let { userName, password, captcha } = this.ruleForm;
          // console.log(this.ruleForm);
          verifyCaptchaApi(captcha).then((res) => {
            if (!res.data.state) {
              loading.close();
              this.$message({
                showClose: true,
                message: "验证码输入错误了啦，请重新输入哦~",
                type: "error",
              });
              this.ruleForm.captcha = "";
              this.getCaptcha();
            } else {
              loginApi(userName, password).then((res) => {
                if (res.data.state) {
                  localStorage.setItem("qf-token", res.data.token);
                  this.$router.push("/");
                } else {
                  this.$message({
                    showClose: true,
                    message: "账号或者密码输入错误了啦，请重新输入哦~",
                    type: "error",
                  });
                  // this.getCaptcha();
                }
                loading.close();
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.getCaptcha();
  },
};
</script>

<style scoped lang="less">
.login-contain {
  height: 100%;
  width: 100%;
  video {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }
}
.el-form {
  width: 400px;
  height: 365px;
  border-radius: 10px;
  position: fixed;
  top: 100px;
  left: 100px;
  background: rgba(0, 0, 0, 0.1);
  .el-title {
    text-align: center;
    margin: 30px 0;
    color: rgb(167, 142, 4);
  }
  .el-form-item {
    padding-right: 60px;
    & /deep/ .el-form-item__label {
      color: black;
      width: 75px !important;
    }
    & /deep/ .el-form-item__content {
      margin-left: 85px !important ;
    }
  }
  .el-button {
    margin-left: 38px;
  }
  .captcha {
    width: 120px;
    box-sizing: border-box;
    margin-top: 5px;
  }
  .captcha-svg {
    width: 120px;
    display: inline-block;
    height: 40.91px;
    background: #fff;
    float: right;
    border-radius: 5px;
    padding-bottom: 10px;
    cursor: pointer;
    & /deep/ svg {
      width: 100%;
    }
  }
}
& /deep/ .el-form .el-form-item:nth-of-type(3) .el-form-item__label {
  margin: 5px;
}
</style>
